/* eslint-disable eqeqeq */
/* eslint-disable array-callback-return */

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Form, Select, message } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import ImageWithToken from '@/plugins/ImageWithToken'
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'

import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'
const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    dataSource: [],
    current: 1,
    pageSize: 6,
    total: 0,
    items: {
      course_type: 1,
      resource_content: '',
    },
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      ...this.state.initialValues,
    }
    post('dashboard/student/resource/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        this.setState({ dataSource: res.data, total: res.size })
      }
    })
  }
  pale = (index) => {
    if (index == 1) {
      if (this.state.current == 1) {
      } else {
        this.setState({ current: this.state.current - 1 })
        this.getData(this.state.current - 1, 6)
      }
    } else {
      if (Math.ceil(this.state.total / 6) > this.state.current) {
        this.setState({ current: this.state.current + 1 })
        this.getData(this.state.current + 1, 6)
      }
    }
  }
  modal = (item) => {
    let data = {
      id: item.resource_id,
    }
    get('course/read?id=' + item.resource_id,).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        if (res.data.course_type === 3) {
          window.open(res.data.course_content)
        } else if (res.data.course_type === 2) {
          this.setState({ visible: true, items: res.data })
        } else if (res.data.course_type === 1) {
          this.setState({ visible: true, items: res.data })
        } else {
          this.setState({ visible: true, items: res.data })
        }
      }
    })
  }
  handleOk = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        resource_content: '',
      },
    })
  }
  handleCancel = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        resource_content: '',
      },
    })
  }
  handleChildEvent = (ref) => {
    this.childRef = ref
  }
  render() {
    const { i18n } = this.props
    const { dataSource, items } = this.state

    return (
      <div style={{ height: '88%' }}>
        <div style={{ position: 'relative', height: '100%' }}>
          <div
            style={{
              display: 'flex',
              width: '94%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
              left: '3%',
              height: '100%',
            }}
          >
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL1.png')}
              />
            </div>
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../imges/mc.png')}
            />
            <div className="zit1">班级资源</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '20px',
              width: '100%',
              zIndex: 5,
              height: '88%',
            }}
          >
            <div className="Nl1">
              {dataSource.map((item) => {
                return (
                  <div className="buhy22">
                    <div style={{ margin: '30px auto 0px' }}>
                      <div
                        onClick={() => this.modal(item)}
                        style={{ cursor: 'pointer' }}
                      >
                        <ImageWithToken
                          style={{
                            width: '256px',
                            height: '172px',
                          }}
                          key={item.resource_id}
                          src={item.resource_logo}
                        />
                      </div>
                    </div>
                    <div className="zit">{item.resource_name}</div>
                  </div>
                )
              })}
            </div>
            <div
              style={{
                position: 'absolute',
                right: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(2)}
                style={{
                  width: '60px',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/le.png')}
              />
            </div>
            <div
              style={{
                position: 'absolute',
                left: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(1)}
                style={{
                  width: '60',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/re.png')}
              />
            </div>
          </div>
          <div className="dby">
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db11.png')}
              />
            </div>
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'absolute',
              bottom: '0px',
              width: '100%',
              zIndex: 8,
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
        <Modal
          width={
            items.course_type == 1
              ? '40%'
              : items.course_type == 2
              ? '80%'
              : '40%'
          }
          title="课程内容"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* 视频 */}
          {items.course_type == 1 ? (
            <div>
              <VeWithToken
                onRef={(c) => (this.ChildPage = c)}
                key={items.id}
                src={items.course_content}
              />
            </div>
          ) : (
            ''
          )}
          {/* pdf文档 */}
          {items.course_type == 2 ? (
            <div>
              <PdfWithToken key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
          {/*  */}
          {items.course_type == 3 ? <div></div> : ''}
          {/* 图片 */}
          {items.course_type == 4 ? (
            <div>
              <ImageWithTokenBig key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
